<template>
	<view>
		<!--我的任务-->
		<view class="tabs-box">
			<u-tabs :list="tabs" @click="tabsClick" keyName="label" lineColor="var(--m-color)"
				:activeStyle="{color:'var(--m-color)',fontSize:'17px'}"></u-tabs>
		</view>
		<view style="height:44px"></view>
		<view class="tasks-list">
			<view class="tasks-item" v-for="item in list"
				@click="navTo('pages/user/task/show',{id:item.id})">
				<view class="top">
					<view class="status">{{item.status}}</view>
					<view class="priority"> {{item.task.priority}}</view>
					<view class="time ml-auto mr-0">
						截至：{{item.task.deadline}}
					</view>
				</view>
				<view class="center">
					<view>{{item.task.title}}</view>
				</view>
				<view class="bottom">
					<view class="time">{{item.assignedDate}}</view>
				</view>
			</view>
		</view>
		<view class="p-30">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		getMeTask,
		getMeParameters
	} from '@/config/api.js'
	export default {
		data() {
			return {
				tabs: [{
					label: '全部',
					value: ''
				}],
				search: {
					status: ''
				},
				loading: false,
				page: 1,
				size: 10,
				status: 'loadmore',
				list: [],
			}
		},
		onLoad() {
			getMeParameters().then(res => {
				this.tabs = [...this.tabs, ...res.taskStatus];
			})
			this.getList(true);
		},
		onPullDownRefresh() {
			this.page = 1;
			this.status = 'loadmore';
			this.getList(true);
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			tabsClick(item) {
				this.page = 1;
				this.status = 'loadmore';
				this.search.status = item.id;
				this.getList(true);
			},
			async getList(isRefresh = false) {
				if (this.status === 'loading' || this.status === 'nomore') {
					return;
				}
				this.status = 'loading';
				const res = await getMeTask({
					params: {
						...{
							page: this.page,
							size: this.size
						},
						...this.search
					}
				});
				const list = res._embedded?.items || [];
				if (isRefresh) {
					this.list = list;
					uni.stopPullDownRefresh()
				} else {
					this.list = this.list.concat(list);
				}
				this.status = res.page.totalElements <= ((res.page.number - 1) * res.page.size + list.length) ?
					'nomore' : 'loadmore';
				this.page = this.page + 1;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.tabs-box {
		background-color: #f7f7f7;
		position: fixed;
		width: 100%;
		height: 44px;
		left: 0;
		top: 0;
		z-index: 999;
	}

	.tasks-list {
		.tasks-item {
			margin-top:30rpx;
			padding:20rpx 30rpx;
			background-color: white;
			.top{
				display: flex;
				align-items: center;
				&>view{
					flex-shrink: 0;
					margin-right: 16rpx;
				}
				.time{
					color:#999;
					font-size:14px;
					
				}
				.status,.priority{
					background-color: lightgreen;
					border-radius: 5px;
					padding:2px 6px;
					color:white;
					font-size:14px;
				}
				.priority{
					background-color: lightcoral;
				}
			}
			.center{
				font-size:17px;
				padding:20rpx 0;
			}
			.bottom{
				color:#999;
				font-size:14px;
			}
		}
	}
</style>